<template>
    <ul 
    v-show="visible" 
    :style="{left:left+'px',top:top+'px'}"
    class="contextmenu">
        <li>打开</li>
        <li>剪切</li>
        <li v-if="value.type==='folder'">复制</li>
        <li v-if="!value.isDefault">删除</li>
        <li>属性</li>
    </ul>

</template>

<script>
export default {
  name: 'iconMenu',
  components: {},
  props: {
    visible:{
        type:Boolean,
        default:false
    },
    left:{
        type:Number,
        default:0
    },
    top:{
        type:Number,
        default:0
    },
    value:{
        type:Object,
        default:null
    }
  },
  emits: [],
  setup(props) {
  }
}

</script>
<style lang='scss' scoped>
.contextmenu {
    width: 100px;
    margin: 0;
    background: #fff;
    z-index: 3000;
    position: absolute;
    list-style-type: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    overflow: hidden;
    box-shadow: 0 2px 5px 0 $grey_2;
    // box-shadow: 0 2px 12px 0 $grey_1;

    li {
        margin: 0;
        padding: 10px 16px;
        cursor: pointer;

        &:hover {
            background: #eee;
        }
    }
}
  
</style>
